<template>
     <div class="all-container">
        <div class="all-container-padding bg" >
         <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form  style="margin-top:30px">
                <!-- <el-form-item label="头像" prop="avatar_url" :label-width="formLabelWidth">
                    <el-upload class="avatar-uploader" action="//shujiaoke.oss-cn-hangzhou.aliyuncs.com" :before-upload="beforeupload" :data="uploadParm" :show-file-list="false" :on-success="handleUpSuccess">
                    <img v-if="userlist.avatar_url" :src="userlist.avatar_url" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon " style="width:80px;height:80px;"></i>
                    </el-upload>
                </el-form-item> -->
                <el-form-item label="用户名" prop="username" :label-width="formLabelWidth" >
                  <el-col :span="6">
                      <el-input v-model="username" disabled></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="邮箱" prop="mail" :label-width="formLabelWidth">
                  <el-col :span="6">   <el-input  disabled v-model="mail"></el-input></el-col>
                </el-form-item>
                <el-form-item label="手机号" prop="phonenumber" :label-width="formLabelWidth">
                  <el-col :span="6">   <el-input disabled v-model="phonenumber"></el-input></el-col>
                </el-form-item> 
                <el-form-item label="用户角色" prop="status" :label-width="formLabelWidth">
                  <el-col :span="6">
                    <el-input disabled v-model="status"></el-input>
                  </el-col>
                </el-form-item>
            </el-form>
            <!-- <div class="grid-content bg-purple"> -->
             <!-- <el-button type="primary"  @click="EditorUserClick('userlist')" >保存</el-button> -->
            <!-- </div> -->
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="second">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="margin-top:30px">
             <el-form-item label="原密码" prop="pass" :label-width="formLabelWidth">
                  <el-col :span="6">   <el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password"></el-input></el-col>
                </el-form-item>
                <el-form-item label="新密码" prop="newpass" :label-width="formLabelWidth">
                  <el-col :span="6"><el-input v-model="ruleForm.newpass" placeholder="请输入新密码" id="newkey" type="password"></el-input></el-col>
                </el-form-item>
                <el-form-item label="重复新密码" prop="checknewpass" :label-width="formLabelWidth">
                  <el-col :span="6">   <el-input v-model="ruleForm.checknewpass" placeholder="请再次输入新密码" id='newkey1' type="password"></el-input></el-col>
                </el-form-item>
                </el-form>
            <el-col :span="6" style="margin-top:10px;margin-left:235px">  
                <el-button type="primary"  @click="submitForm('ruleForm')">保存</el-button>
            </el-col>
          </el-tab-pane>
        </el-tabs>
        </div>
     </div>
</template>
<script>

import { mapGetters } from "vuex";
import tagSearching from '../userList/tagSearching.vue';
export default {
  components: { tagSearching },
  data() {
/*****检验两次密码是否一致***/
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checknewpass !== "") {
          this.$refs.ruleForm.validateField("checknewpass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newpass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      // uploadParm: {}, //图片的上传
      ruleForm: {
        pass:'',
        newpass:'',
        checknewpass:''
      },//修改密码的表单
      activeName: "first",
      loading: true,      
        username:'',
        password:'',
        mail:'',
        phonenumber:'',
        status:'',
      //用户信息表单
      formLabelWidth: "150px",
    /***校验***/
      rules: {
        pass: [
          {
            required: true,
            trigger: "blur",
            message: "请输入密码"
          }
        ],

        newpass: [
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        checknewpass: [
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ]
      }
    };
  },
  created:function(){ 
    this.username=localStorage.getItem('username')
    this.password=localStorage.getItem('password')
    this.mail=localStorage.getItem('mail')
    this.phonenumber=localStorage.getItem('phonenumber')
    this.status=localStorage.getItem('status')

    if(this.status=='0'){
        this.status='普通用户'
      }else if(this.status=='1'){
        this.status='管理员'
      }else if(this.status=='2'){
        this.status='超级管理员'
      }
    
    
  },
  computed: {
    // ...mapGetters(["username"])
  },
  methods: {
    //获取个人用户的信息
    // getUser() {
    //   this.$root.Bus.$on('username',(e)=>{
    //     this.$axios.get('/api/user/finduser',{
    //         params:{
    //             param_name:'username',
    //             param:e
    //         }
    //     }).then(res=>{
    //         console.log(res)
            
    //         this.username=res.data.username
    //         this.password=res.data.password
    //         this.mail=res.data.mail
    //         this.phonenumber=res.data.phonenumber
    //         this.status=res.data.status
            
            
    //     })
    //   })
    // },
    //tab切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    
    
    //上传参数图片初始化
    // upload() {
    //   var currentTimeStamp = new Date().getTime() / 1000;
    //   if (
    //     this.uploadParams == null ||
    //     this.uploadParams.expire + 3 < currentTimeStamp
    //   ) {
    //     this.$store
    //       .dispatch("GetUploadParams")
    //       .then(req => {
    //         this.uploadParm = req.data;
    //       })
    //       .catch(err => {
    //         this.$message({ message: err.message, type: "warning" });
    //       });
    //   } else {
    //     this.uploadParm = this.uploadParams;
    //   }
    // },
    // //上传之前
    // beforeupload(file) {
    //   this.uploadParm.key = this.uploadParm.dir + guid();
    //   // console.log(this.uploadParm)
    // },
    // //图片上传上传成功
    // handleUpSuccess(response, file, fileList) {
    //   var newfile = {
    //     name: file.name,
    //     type: file.raw.type,
    //     size: bytesToSize(file.size),
    //     url: this.uploadParm.key
    //   };
    //   postData("file", newfile).then(response => {
    //     if (response.status == 200) {
    //       this.$message({ message: "修改成功", type: "success" });
    //       this.userlist.style_file_id = response.data.id;
    //       this.userlist.avatar_url = this.baseUrl + response.data.url;
    //     } else {
    //       this.$message({ message: "修改失败", type: "error" });
    //     }
    //   });
    //   console.log(this.userlist);
    // },
    //修改密码
    submitForm(ruleForm) {
      console.log(this.ruleForm.pass)
      console.log(this.password)
      console.log(this.ruleForm.newpass)
      if(this.ruleForm.pass!=this.password){
        this.$message.error("输入密码错误！请重新输入")
      }else{
        var params = new URLSearchParams();
        params.append('username', this.username);
        params.append('psw', this.ruleForm.newpass); 
        this.$axios.post('/api/user/modifypsw',params).then(res=>{
          console.log(res)
          this.$message({
            message: "修改成功",
            type: "success"
          })
        })
      }
      // postData("接口", obj).then(response => {
      //   if (response.status == 200) {
      //     this.$message({
      //       message: "保存成功",
      //       type: "success"
      //     });
      //   } else {
      //     this.$message({
      //       message: "修改失败" + response.message,
      //       type: "error"
      //     });
      //   }
      // });
    },
    //编辑提交的方法
    // EditorUserClick() {
    //   this.$refs.EditorUserForms.validate(valid => {
    //     if (valid) {
    //       console.log(this.userlist);
    //       putData("接口", this.userlist).then(response => {
    //         if (response.status == 200) {
    //           this.$message({
    //             message: "编辑成功",
    //             type: "success"
    //           });
    //         } else {
    //           this.$message({
    //             message: "修改失败" + response.message,
    //             type: "error"
    //           });
    //         }
    //       });
       
    //     }
    //   });
    // }
  }
};
</script>
<style>
.el-textarea.is-disabled .el-textarea__inner {
  opacity: 1;
  color: #0A0813;
}
</style>
